<template>
  <div class="xskq">
    <Header class="header" title="学生考勤"/>

    <div class="content" style="margin: 5px 10px;">
      <van-grid :column-num="2">
        <van-grid-item @click="onClickEwm">
          <img style="width: 60px; height: 60px" src="../../image/xskq_ewm.png" alt="">
          <p style="font-size: 14px">二维码考勤</p>
        </van-grid-item>
        <van-grid-item @click="onClickKl">
          <img style="width: 60px; height: 60px" src="../../image/xskq_kl.png" alt="">
          <p style="font-size: 14px">口令考勤</p>
        </van-grid-item>
      </van-grid>
    </div>

    <van-popup class="van-p" v-model:show="showPopup" position="center" round :overlay="false">
      <van-loading size="40px" type="spinner" color="#1989fa"></van-loading>
      <p class="text" style="margin-top: 15px; font-size: 1rem">设备检验中...</p>
    </van-popup>

    <nut-overlay v-model:visible="showKlDialog" :close-on-click-overlay="false" >
      <div class="numberInput">
        <div class="content">
          <div class="input">
            <nut-input v-model="KLvalue" type="number" placeholder="请输入数字"/>
          </div>
          <div class="btn">
            <nut-button type="warning" @click="dialogCancel">取消</nut-button>
            <nut-button type="success" @click="dialogConfirm">确认</nut-button>
          </div>
        </div>
      </div>
    </nut-overlay>

    <nut-overlay v-model:visible="showEwmDialog" >
      <div class="numberInput">
        <div class="content">
          <div class="text">
            该功能仅在微信端开放！
            <br>
            点击屏幕任意位置关闭
          </div>
        </div>
      </div>
    </nut-overlay>
  </div>
</template>

<script setup>
import Header from '../../components/Header/Header.vue'
import {getScanParamU, checkEwmkq, checkKlkq} from '/@/api/xskq'
import wx from 'weixin-js-sdk'
import {Toast} from 'vant';
import 'vant/es/toast/style';

  const test = reactive({});
  const showPopup = ref(false);
  const showKlDialog = ref(false);
  const showEwmDialog = ref(false);
  const KLvalue = ref('');
  const clickEwmFlag = ref(false);

  onMounted(() => {
    getScanParam();
  })

  async function getScanParam() {
    //关闭数据加载中
    setTimeout(() =>{
      showPopup.value = false
    }, 500);
    const ua = navigator.userAgent.toLowerCase();
    const isWeixin = ua.indexOf('micromessenger') !== -1;
    console.log('isWeixin', isWeixin);
    console.log('wx', wx)
    if (isWeixin) {
      /*// 使用Vue3的this.$http或this.$axios来代替$.ajax
      this.$http.post("getScanParam", {
        url: location.href.split("#")[0]
      }).then((response) => {*/
      const url = location.href.split('#')[0]

      const rep = await getScanParamU(url);
      if (rep.response.value.code === 200) {
        const result = rep.response.value
        wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端 alert 出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId:result.extend.qrCode.appId,
          // 必填，生成签名的时间戳
          timestamp:result.extend.qrCode.timestamp,
          // 必填，生成签名的随机串
          nonceStr:result.extend.qrCode.noncestr,
          // 必填，签名，见附录1
          signature:result.extend.qrCode.signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList : ['scanQRCode']
        });
        console.log('wxConfig', wx.config)
      }
      wx.ready(() => {  // 基础环境和token签名已检查完毕
        console.log("token签名已检查完毕");

        //判断当前客户端版本是否支持指定JS接口
        wx.checkJsApi({
          jsApiList : ['scanQRCode'],
          success : function(res) {
            console.log("jsApiList检验成功");
            // 用户具备调用扫码功能接口
            clickEwmFlag.value = true;
          }
        });

        wx.error(function(res) {
          alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
        });
      });
    } else {
      // 弹窗在点击函数里做响应
    }
  }

  function onClickEwm() {
    if (clickEwmFlag.value === true) {
      wx.scanQRCode({
        needResult: 1,
        desc: 'scanQRCode desc',
        success: async function (res) {
          const repEwm = await checkEwmkq(res.resultStr);
          if (repEwm.response.value.code === 200) {
            Toast('签到成功');
          }
        }
      });
    }else{
      Toast('该功能仅在微信端开放');
    }
  }

  function onClickKl() {
    KLvalue.value = '';
    showKlDialog.value = true;
  }

  function dialogCancel() {
    showKlDialog.value = false;
    KLvalue.value = '';
  }

  async function dialogConfirm() {
    showKlDialog.value = false;
    if (KLvalue.value !== '') {
      const repKl = await checkKlkq(KLvalue.value);
      console.log('repKl', repKl);
      if (repKl.response.value.code === 200) {
        // Toast.success('签到成功');
        Toast('签到成功');
      }
    }
  }

</script>

<style scoped lang="less">

.numberInput {
  display: flex;
  height:100vh;
  width:100vw;
  align-items: center;
  justify-content: center;
  .content {
    width: 80%;
    height: 300px;
    background: #fff;
    border-radius: 8px;
    color: black;

    .input{
      margin:40px auto;
      border: 0.8px solid black;
      border-radius: 8px;
      height: 100px;
      width: 80%;
    }

    .text{
      text-align: center;
      margin-top: 100px;
      font-size: 35px;
      color: #ed6a0c;
    }

    .btn{
      display: flex;
      justify-content: space-between;
      margin-left: 60px;
      width: 80%;
    }
  }
}

/deep/ .van-popup--center.van-popup--round{
  height: 300px;
  width: 300px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

/deep/ .nut-overlay{

}
</style>
